﻿@page "/components/menu"


<DocsPage>
    <DocsPageHeader Title="Menus" SubTitle="The component shows a menu at the position of the element used to activate it" />
    <DocsPageContent>

        <DocsPageSection>
            <SectionHeader>
                <Title>Simple Menu</Title>
                <Description></Description>
            </SectionHeader>
            <SectionContent Outlined="true">
                <MenuSimpleExample />
            </SectionContent>
            <SectionSource Code="MenuSimpleExample" GitHubFolderName="Menu"  />
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader>
                <Title>Customization</Title>
                <Description>The menu button gives you all the options a regular button would do.</Description>
            </SectionHeader>
            <SectionContent Outlined="true" DisplayFlex="true">
                <MenuCustomizationExample />
            </SectionContent>
            <SectionSource Code="MenuCustomizationExample" ShowCode="false" GitHubFolderName="Menu"  />
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader>
                <Title>Menu Width</Title>
                <Description>The default width of the menu popover is determen by the contents width, you can override this with the <CodeInline>FullWidth</CodeInline> property to make it as wide as the parent.</Description>
            </SectionHeader>
            <SectionContent Outlined="true" DisplayFlex="true">
                <MenuWithExample />
            </SectionContent>
            <SectionSource Code="MenuWithExample" ShowCode="false" GitHubFolderName="Menu" />
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader>
                <Title>Max Height Menu</Title>
                <Description>If you have a long list you can use the <CodeInline>MaxHeight</CodeInline> property to set the maximum height and enable scroll instead.</Description>
            </SectionHeader>
            <SectionContent Outlined="true" DisplayFlex="true">
                <MenuMaxHeightExample />
            </SectionContent>
            <SectionSource Code="MenuMaxHeightExample" ShowCode="false" GitHubFolderName="Menu" />
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader>
                <Title>Direction</Title>
                <Description>Control where the menu should start from relative to the parent. Where Top-Left is the default.</Description>
            </SectionHeader>
            <SectionContent Outlined="true" DisplayFlex="true">
                <MenuDirectionExample />
            </SectionContent>
            <SectionSource Code="MenuDirectionExample" ShowCode="false" GitHubFolderName="Menu" />
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader>
                <Title>Offset</Title>
                <Description>Offset the menu to be located outside of the parent.</Description>
            </SectionHeader>
            <SectionContent Outlined="true" DisplayFlex="true">
                <MenuOffsetExample />
            </SectionContent>
            <SectionSource Code="MenuOffsetExample" ShowCode="false" GitHubFolderName="Menu" />
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader>
                <Title>Icon Buttons</Title>
                <Description>If an Icon is supplied through the <CodeInline>Icon</CodeInline> property the menu button will display as an <CodeInline>IconButton</CodeInline></Description>
            </SectionHeader>
            <SectionContent Outlined="true" DisplayFlex="true">
                <MenuIconButtonsExample />
            </SectionContent>
            <SectionSource Code="MenuIconButtonsExample" ShowCode="true" GitHubFolderName="Menu"  />
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader>
                <Title>Usage</Title>
                <Description>The menu items also acts like buttons, simply assign them a onclick event or a link.</Description>
            </SectionHeader>
            <SectionContent Outlined="true" DisplayFlex="true">
                <MenuUsageExample />
            </SectionContent>
            <SectionSource Code="MenuUsageExample" ShowCode="true" GitHubFolderName="Menu"  />
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader>
                <Title>Custom Activator</Title>
                <Description>Using <CodeInline>ActivatorContent</CodeInline> you can use any user interface element to activate the menu on click. You can place a completely customized button or any other elements there.</Description>
            </SectionHeader>
            <SectionContent Outlined="true" DisplayFlex="true">
                <MenuActivatorExample1 />
            </SectionContent>
            <SectionSource Code="MenuActivatorExample1" ShowCode="false" GitHubFolderName="Menu" />

            <SectionHeader>
                <Description>With the property <CodeInline>ActivationEvent</CodeInline> the menu can be opened on different mouse events.</Description>
            </SectionHeader>
            <SectionContent Outlined="true" DisplayFlex="true">
                <MenuActivatorExample2 />
            </SectionContent>
            <SectionSource Code="MenuActivatorExample2" ShowCode="false" GitHubFolderName="Menu" />

            <SectionHeader>
                <Description>With the property <CodeInline>PositionAtCurser</CodeInline> the menu will open in the location of the click.</Description>
            </SectionHeader>
            <SectionContent Outlined="true">
                <MenuActivatorOnMouseExample />
            </SectionContent>
            <SectionSource Code="MenuActivatorOnMouseExample" ShowCode="true" GitHubFolderName="Menu" />
        </DocsPageSection>

    </DocsPageContent>
</DocsPage>

